<template>
	<view class="content">
		<template v-if="user != ''">
			<view class="tzcontent">
				<view style="text-align: center; font-size: 16px;">通知公告</view>
				<view class="list">
					<view class="flex_col" @click="noticeDetails(item.id)" v-for="(item,index) in list" :key="index" v-if="index<4">
						<!-- <image src="../../static/gonggao.png" mode="aspectFill" style="width: 16px;height: 16px;padding:0 1.5%;"></image> -->
						<uni-icons type="sound" size="16" color="#6BA8FD" style="margin: 0 5% 1%;"></uni-icons>
						<view class="flex_grow">
							<view class="flex_col">
								<view class="flex_grow">{{item.msg|strFormat}}</view>
								<view class="time">{{item.createDate | dateFormat("YYYY-MM-DD")}}</view>
								<view style="color: #2DB7F5;padding-right: 5px;" v-if="item.read">已读</view>
								<view style="color: #F56C6C;padding-right: 5px;" v-else="item.read">未读</view>
							</view>
						</view>
					</view>
				</view>

				<view @click="tomore" v-if="list.length>4" style="margin-left: 80%;color:#6BA8FD ;"><span>查看更多...</span></view>
				<view  v-if="list.length==0" style="position: absolute;bottom: 0;margin-left: 43%;"><span>暂无数据</span></view>
			</view>

			<!-- 页面第二部分 -->
			<view style="margin-bottom: 5px; margin-top: 10px;">
				<view @click="totask" style="width: 48.5%;background-color: #f8f8f9;float: left;position: relative;margin-right: 5px;border-radius: 5px;">
					<view style="float: left;width: 50%;">
						<view><image src="../../static/book4.png" style="height: 110rpx;width: 90%;margin: 25px 0 10px 10px;"></image></view>
						<view style="width: 100%;text-align: center;">待办任务</view>
					</view>
					<view style="float: left;width: 50%;"><view class="pan" style="margin-top:15%;float: left;">{{total1}}</view></view>
				</view>

				<view style="width: 48.5%;background-color:#f8f8f9;float: right;position: relative;margin-left: 5px;border-radius: 5px;">
					<view style="width: 50%;float: left;">
						<view><image src="../../static/hourglass.png" style="height: 110rpx;width: 90%;margin: 25px 0 10px 10px;"></image></view>
						<view style="width: 100%;text-align: center;">年完成量</view>
					</view>

					<view style="width: 50%;height: 67.5px;float: left;"><view class="pan" style="margin-top:15%;float: left;">{{yearCount}}</view></view>
				</view>
			</view>
			<!-- 页面第三部分 -->
			<view class="shead"><span>水产苗种产地检疫工作任务</span></view>

			<view class="workDetails">
				<button class="detailsItem" v-for="(item, index) in tabBars" :key="index" :class="clickIndex == index ? 'clickStyle' : ''" @click="tabclick(index)" :disabled="isDisabled">
					{{ item.name }}
				</button>
			</view>
			
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view style="padding: 10px 0;border-bottom: 1px solid #DEDEE1;" class="item" v-for="(item, index) in data" :key="index" @click="workDetails(item.workId, item.id, item.segregationId,item.archive)">
								<view class="title">{{ item.companyName }}</view>
								<view class="title">{{ item.companyMobeltel }}</view>
								<view class="title">{{ item.accTime | dateFormat('YYYY-MM-DD') }}</view>
								<view class="archive0" v-if="item.archive == 0">未归档</view>
								<view class="archive1" v-if="item.archive == 1">归&nbsp;&nbsp;&nbsp;&nbsp;档</view>
					</view>
				</scroll-view>
			</view>
			<!-- 上拉加载更多 -->
			<view>
				<uni-load-more :status="status"/>
			</view>
		</template>
	</view>

</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniSection from '@/components/uni-section/uni-section.vue';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	// import uniIcons from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import { mapState, mapMutations } from 'vuex';
import loginjs from '../../login.js';
export default {
	components: {
		uniIcons,
		uniSection,
		uniList,
		uniListItem,
		uniLoadMore
	},
	computed: mapState(['baseUrl']),
	data() {
		return {
			flag:false,
			iconClassList: [{
						name: 'sound',
						unicode: 'e590'
					}],
			isDisabled:false,
			listContent: [],
			Authorization: null,
			windowH: 0,
			size:8,
			user: null, //当前登陆用户
			data: [],
			list: [],
			total1: 0,
			total2: 0,
			total3: 0,
			yearCount:0,
			showLoading:false,
			tabBars: [
				{
					id: '1',
					name: '待办任务'
				},
				{
					id: '2',
					name: '已办任务'
				},
				{
					id: '3',
					name: '全部任务'
				}
			],
			//代办假数据
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			clickIndex: 0,
			workResult: {
				quarantineResult: 0,
			
			},
				// current: 1,
				status:'',
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				//end
		};
	},
	onShow() {
		this.current=1;
		this.data = [];
		var uNameAndAuth = loginjs.checkLogin();
		if (uNameAndAuth == null) {
			return;
		}
			//用户名和认证信息的组合
			uNameAndAuth = uNameAndAuth.split('/');
			this.user = uNameAndAuth[0];
			this.Authorization = uNameAndAuth[1];
		this.getDataList(this.clickIndex);
		this.getNoticeDataList();
		this.getYearCount()
	},
	onPullDownRefresh() {
		setTimeout(function(){
		uni.stopPullDownRefresh();	
		},2000)
		/* 下拉刷新方法 */
		this.current = 1;
		this.data = [];
		this.list = [];
		this.getDataList(this.clickIndex);
		this.getNoticeDataList();
		this.getYearCount()
	},
	onLoad: function(options) {
		//uni.startPullDownRefresh();
	},
	// 上拉加载
	onReachBottom() {
		let _self = this
		this.status = 'loading'
		// uni.showNavigationBarLoading()
		// uni.hideNavigationBarLoading()
		// console.log(this.current)
		let pag = parseInt((this.total1)/8)+1;
		let pag2 = parseInt((this.total2)/8)+1;//3
		let pag3 = parseInt((this.total3)/8)+1;//4
		// console.log(this.clickIndex)
		// console.log(pag)
		switch (this.clickIndex){
			case 0:
				if(this.current>=pag){
				/* 	uni.showToast({
						title:"当前最后一页了",
						duration:2000,
						icon:"none"
					}) */
					this.status= 'nomore';
					return
				}else{
					setTimeout(function() {
						 _self.current = _self.current+1;
						 _self.getDataList(_self.clickIndex);
						_self.status = 'more'
					}, 1000);
				}
				break;
			case 1:
				if(this.current>=pag2){
					this.status= 'nomore';
					return
				}else{
					setTimeout(function() {
						 _self.current = _self.current+1;
						 _self.getDataList(_self.clickIndex);
						_self.status = 'more'
					}, 1000);
				}
				break;
			case 2:
				if(this.current>=pag3){
					this.status= 'nomore';
					return
				}else{
					setTimeout(function() {
						 _self.current = _self.current+1;
						 _self.getDataList(_self.clickIndex);
						_self.status = 'more'
					}, 1000);
				}
				break;
		}
	},
	filters:{
		strFormat(str){
			if(str.length>12){
				return str.substr(0,12)+"..."
			}else{
				return str
			}
		}
	},
	methods: {
		getYearCount(){
			uni.request({
				url: this.baseUrl + 'api/quarantine/tenement/year/count',
				header: {
					Authorization: this.Authorization
				},
				success: res => {
					if (res.data.code == 200) {
						this.yearCount=res.data.data
					}else if(res.data.code==401){
						uni.redirectTo({
						url: '../login/login'
						})	
					}
				},
				fail(e) {
						uni.showToast({
							title: "系统繁忙，稍后重试",
							icon: "none",
							duration: 2000
						})
					}
			});
		},
		//获取数据
		getDataList(val) {
			var tmpdata = null;
			if (this.workResult.quarantineResult != null) {
				tmpdata = {
					quarantineResult: this.workResult.quarantineResult,
					current: this.current,
					size:8,
				}
			}else{
				tmpdata = {
					current: this.current,
					size:8,
				}
			}
		
			uni.request({
				url: this.baseUrl + 'api/quarantine/tenement/page',
				header: {
					Authorization: this.Authorization
				},
				//dataType:'JSON',
				data: tmpdata,
				success: res => {
					if (res.data.code == 200) {
						uni.stopPullDownRefresh();
						var length = res.data.data.length;
						var dataarray = [];
						dataarray = res.data.data;
						if (val == 0 || val == null) {
							this.total1 = res.data.pager.total;
							// console.log(this.total1)
							this.tabBars[0].name = '待办任务共' + this.total1 + '条';
							if (this.total2 > 0) {
								this.tabBars[1].name = '已办任务共' + this.total2 + '条';
							} else {
								this.tabBars[1].name = '已办任务';
							}
							if (this.total3 > 0) {
								this.tabBars[2].name = '全部任务共' + this.total3 + '条';
							} else {
								this.tabBars[2].name = '全部任务';
							}
						} else if (val == 1) {
							this.total2 = res.data.pager.total;
							// console.log(this.total2)
							this.tabBars[0].name = '待办任务共' + this.total1 + '条';
							this.tabBars[1].name = '已办任务共' + this.total2 + '条';

							if (this.total3 > 0) {
								this.tabBars[2].name = '全部任务共' + this.total3 + '条';
							} else {
								this.tabBars[2].name = '全部任务';
							}
						} else if (val == 2) {
							this.total3 = res.data.pager.total;
							this.tabBars[0].name = '待办任务共' + this.total1 + '条';
							if (this.total2 > 0) {
								this.tabBars[1].name = '已办任务共' + this.total2 + '条';
							} else {
								this.tabBars[1].name = '已办任务';
							}
							this.tabBars[2].name = '全部任务共' + this.total3 + '条';
						}
						if (length == 0) {
							return;
						}
						// this.data = []
						 // console.log(this.data)
						for (var i = 0; i < length; i++) {
							 // console.log(length);
							var workId = dataarray[i].workId;
							var id = dataarray[i].id;
							var companyName = dataarray[i].billWorkRecord.shipperCompany;
							var accTime = dataarray[i].updateDate; /*decTime */
							var companyMobeltel = dataarray[i].billWorkRecord.decMobeltel;
							var segregationId = dataarray[i].segregationId;
							var archive = dataarray[i].archive;
							var obj = {};
							obj['id'] = id;
							obj['workId'] = workId;
							obj['companyName'] = companyName;
							obj['companyMobeltel'] = companyMobeltel;
							obj['accTime'] = accTime;
							obj['segregationId'] = segregationId;
							obj['archive'] = archive;
							this.data.push(obj);
							// console.log(this.data[0])
						}
						
					}
				},
				fail(e) {
						uni.showToast({
							title: "系统繁忙，稍后重试",
							icon: "none",
							duration: 2000
						})
					}
			});
		},

		//获取通知列表
		getNoticeDataList() {
			uni.request({
				url: this.baseUrl + 'api/notice/page?appName=' + '通知公告',
				header: {
					Authorization: this.Authorization
				},
				success: res => {
					if (res.data.code == 200) {
						uni.stopPullDownRefresh();
						if (res.data.data.length == 0) {
							return;
						} else {
							this.list = res.data.data
						}
					}
				}
			});
		},
		tomore() {
			uni.navigateTo({
				url: '../notice/more'
			});
		},
		totask() {
			uni.navigateTo({
				url: '../notice/task'
			});
		},
		noticeDetails(e) {
			//跳转至消息详情
			uni.navigateTo({
				url: '../notice/noticeDetails?noticeId=' + e
			});
		},
		enable() {
			setTimeout(() => {
				this.isDisabled = false
			},1000);
		},
		tabclick(val) {
			this.isDisabled = true;
			this.enable();
			this.current=1;
			this.data = [];
			this.clickIndex = val;
			//加载相对应的数据
			// console.log(val)
				switch (val) {
					case 0:
						/* 待办任务 */
						this.workResult.quarantineResult = 0;
						this.getDataList(val);
						break;
					case 1:
						/* 已办任务 */
						this.workResult.quarantineResult = 3;
						this.getDataList(val);
						break;
					case 2:
						/* 全部任务 */
						this.workResult.quarantineResult = null;
						this.getDataList(val);
						break;
				}
			
		},
		workDetails(val, val2, val3,val4) {
			this.current=1;
			if(val4 == 1){
				uni.showToast({
					title: "归档数据不可修改",
					icon: "none",
					duration: 2000
				})
				return false
			}else{
				uni.navigateTo({
					url: '../quarantine/quarantine?workId=' + val + '&qid=' + val2,
				});
			}
		},
		scroll: function(e) {
			//console.log(e)
			//this.old.scrollTop = e.detail.scrollTop
		},
		upper: function(e) {
			console.log('顶部');
			//this.data=this.data
		},
		lower: function(e) {
			console.log('底部');
			//进行加载操作
		}
	}
};
</script>

<style>
page {
	/* background-color: #DCDCDC; */
}

.content .tzcontent {
	padding-top: 5upx;
	height: 180px;
	background-color: #f8f8f9;
	position: relative;
	border-radius: 5px;
}

.content .tzcontent .item {
	height: 30px;
}

.content .tzcontent .text {
	margin-left: 10upx;
	float: left;
	width: 200px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.content .tzcontent .time {
	float: right;
	margin-right: 20upx;
	line-height: 25upx;
}

.content .shead {
	margin-top: 10upx;
	height: 60upx;
	font-size: 26upx;
	color: white;
	line-height: 60upx;
	text-align: center;
	background-color: #2db7f5;
	border-radius: 5px;
}

.content .detailsItem {
	width: 236upx;
	margin-top: 20upx;
	font-size: 20upx;
	height: 50upx;
	float: left;
	text-align: center;
	line-height: 50upx;
}
button::after{ border: none;} 
.content .detailsItem:nth-child(1) {
	border-radius: 5px 0 0 5px;
	border-left: 1px solid #DCDFE6;
	border-top: 1px solid #DCDFE6;
	border-bottom: 1px solid #DCDFE6;
}
.content .detailsItem:nth-child(2) {
	border-radius: 0;
	border-top: 1px solid #DCDFE6;
	border-bottom: 1px solid #DCDFE6;
}
.content .detailsItem:nth-child(3) {
	border-radius: 0 5px 5px 0;
	border-top: 1px solid #DCDFE6;
	border-bottom: 1px solid #DCDFE6;
	border-right: 1px solid #DCDFE6;
}
.clickStyle {
	/* background-color: #f8f8f9; */
	/* background-color: #2db7f5;
	border-radius: 5px;
	background-size: 100% 100%; */
	border-bottom: 2px solid #2db7f5 !important;
}

.content .result {
	background-color: white;
}

.content .result .item {
	width: 710upx;
	height: 40upx;
	margin-top: 20upx;
	font-size: 20upx;
	text-align: center;
	line-height: 40upx;
}

.content .result .item .title {
	width: 200upx;
	float: left;
	margin-left: 10upx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.content .result .item .phone {
	float: left;
	width: 200upx;
}

.content .result .item .time {
	float: right;
	margin-right: 10px;
	width: 200upx;
}

.content .result .scroll-Y {
}
image {
	display: inline-block;
	width: 100px;
	height: 90px;
	margin-left: 20px;
	margin-top: 10px;
}
.pan {
	/* border: 1px solid #000000; */
	font-size: 270%;
	font-weight: 700;
	float: right;
	margin: 0 0 0 10px;
	z-index: 999;
}
</style>
<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	.title {
		display: inline-block;
		width: 28%;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.archive0{
		display: inline-block;
		width: 16%;
		text-align: center;
		color: #2DB7F5;
	}
	.archive1{
		display: inline-block;
		width: 16%;
		text-align: center;
		color: #F56C6C;
	}
	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	uni-radio-group uni-label {
		padding: 0;
	}

	.uni-list-item__container {
		padding: 24upx 30upx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__container:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	view {
		box-sizing: border-box;
	}
</style>
<style scoped lang="scss">
	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		// background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			// padding: 24upx 30upx;
			height: 30px;
			position: relative;

			&:active,
			&.active {
				// background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform:scaleY(0.5);	/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					// background-color: #f3f3f3;
				}
			}
		}
	}
</style>
